<template>
  <div class="cand_regist">
    <head-top head-title="业委会候选人报名" go-back="true"></head-top>
    <div class="cand_title">
      <h3>{{topTitle}}</h3>
    </div>
    <ul class="cand_input">
      <li>
        <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
        <input type="text" v-model="name" placeholder="请输入真实姓名">
      </li>
      <li>
        <span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</span>
        <ul class="check-ul">
          <li>
            <label class="checkbox-label" v-for="(s,sindex) in sex" @click="selectOne(s.id)">
              <input type="radio" class="check-input" v-model="selectArr" :value="sindex" :checked="sindex === 0">
              <span class="check-core"></span>
              <span class="check-span">{{s.label}}</span>
            </label>
          </li>
        </ul>
      </li>
      <li>
        <span>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：</span>
        <input type="text" v-model="zhiye" placeholder="请输入职业">
      </li>
      <li>
        <span>出生年月：</span>
        <input type="text" v-model="birthday" placeholder="例2019.10.1">
      </li>
      <li>
        <span>文化程度：</span>
        <input type="text" v-model="culture" placeholder="请输入文化程度">
      </li>
      <li>
        <span>政治面貌：</span>
        <input type="text" v-model="face" placeholder="请输入政治面貌">
      </li>
      <li>
        <span>房屋信息：</span>
        <input type="text" v-model="house" placeholder="例1幢1单元1室">
      </li>
      <li>
        <span>联系方式：</span>
        <input type="text" maxlength="11" v-model="phone" placeholder="请输入联系方式">
      </li>
      <li>
        <span>竞选职位：</span>
        <input type="text" v-model="zhiwei" placeholder="请输入竞选职位">
      </li>
    </ul>
    <div class="fee_div">
      <h4>有无欠交物业服务费用等损害业主共同权益的行为</h4>
      <ul class="check-ul">
        <li>
          <label class="checkbox-label" v-for="(a,aindex) in arrears" @click="selectBtn(a.id)">
            <input type="radio" class="check-input" v-model="selectArr2" :value="aindex" :checked="aindex === 0">
            <span class="check-core"></span>
            <span class="check-span">{{a.type}}</span>
          </label>
        </li>
      </ul>
    </div>
    <div class="textarea_div">
      <p>个人简介</p>
      <textarea @keyup="writeContent" @input="writeContent" name="" placeholder="请填写你的个人简介..." cols="30"
                rows="10" v-model="introduce"
                maxlength="500"></textarea>
      <div class="count">
        {{intrudeCount}}/{{intrudetotal-intrudeCount}}
      </div>
    </div>
    <div class="textarea_div">
      <p>履职承诺</p>
      <textarea @keyup="writeContent2" @input="writeContent2" name="" placeholder="请输入你的履职承诺..." cols="30"
                rows="10" v-model="duty"
                maxlength="1000"></textarea>
      <div class="count">
        {{dutyCount}}/{{dutytotal-dutyCount}}
      </div>
    </div>
    <div class="img_post">
      <div class="title">
        请上传寸照（<span>最好上传寸照</span>）
      </div>
      <ident-pub @getImage="getImage"></ident-pub>
      <p><span>提示！</span>务必上传高清图片</p>
    </div>
    <div class="img_post">
      <div class="title">
        请上传身份证（<span>正反面</span>）和房产证
      </div>
      <ident-pub2 @getImg="getImg" des-text="true"></ident-pub2>
    </div>
    <div class="btn_div">
      <button @click="postBtn">确认提交</button>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header'
  import { Toast, Indicator } from 'mint-ui'
  import IdentPub from '../common/inchpublish1'
  import IdentPub2 from '../common/inchpublish2'
  import { candRegist } from '../../api/election'

  export default {
    name: 'CandRegist',
    data () {
      return {
        topTitle: '', // 报名名称
        name: '', // 姓名
        zhiye: '', // 职业
        birthday: '', // 生日
        culture: '', // 文化程度
        face: '', // 政治面貌
        house: '', // 房屋信息
        phone: '', // 联系方式
        zhiwei: '', // 竞选职位
        sex: [
          {
            label: '男',
            id: '1'
          },
          {
            label: '女',
            id: '0'
          }
        ],
        selectArr: [],
        arrears: [
          {
            type: '有',
            id: '1'
          },
          {
            type: '无',
            id: '0'
          }
        ],
        selectArr2: [],
        intrudetotal: 500, // 个人简介输入总字数
        intrudeCount: 0, // 个人简介默认字数
        introduce: '', // 个人简介
        dutytotal: 1000, // 履职承诺输入总字数
        dutyCount: 0, // 履职承诺默认字数
        duty: '', // 履职承诺
        inchPhoto: [], // 寸照
        papers: [], // 其他证件
        id: '', // 列表的id
        sexId: '', // 性别id
        feeId: '', // 物业费id
        areas: '', // 房屋面积
        reason: '' // 报名理由
      }
    },
    created () {
      // console.log(this.$route.params.id)
      this.id = this.$route.params.id
      this.topTitle = this.$route.params.title
    },
    methods: {
      // 性别
      selectOne (id) {
        // console.log(id)
        this.sexId = id
      },
      // 有无欠费
      selectBtn (id2) {
        // console.log(id2)
        this.feeId = id2
      },
      // 个人简介字体有没有超过预定值
      writeContent () {
        this.intrudeCount = this.introduce.length
        let remainCount = this.intrudetotal - this.intrudeCount
        if (!remainCount) {
          Toast({
            message: '字数不能超过500',
            position: 'middle',
            duration: 3000
          })
          return
        }
      },

      // 履职承诺字体有没有超过预定值
      writeContent2 () {
        this.dutyCount = this.duty.length
        let dutyCount = this.dutytotal - this.dutyCount
        if (!dutyCount) {
          Toast({
            message: '字数不能超过1000',
            position: 'middle',
            duration: 3000
          })
          return
        }
      },

      // 寸照
      getImage (image) {
        this.inchPhoto = image
        // console.log(this.inchPhoto)
      },
      // 其它证件照
      getImg (image) {
        this.papers = image
        // console.log(this.papers)
      },
      postBtn () {
        setTimeout(function () {
          Indicator.close()
        }, 5000)
        if (!this.name) {
          Toast({
            message: '请输入真实姓名！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.sexId) {
          Toast({
            message: '请选择性别！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.zhiye) {
          Toast({
            message: '请输入职业！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.birthday) {
          Toast({
            message: '请输入出生年月！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.culture) {
          Toast({
            message: '请输入文化程度！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.face) {
          Toast({
            message: '请输入政治面貌！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.house) {
          Toast({
            message: '请准确输入房屋信息！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.phone) {
          Toast({
            message: '请输入正确的联系方式！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.zhiwei) {
          Toast({
            message: '请输入竞选职位！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.feeId) {
          Toast({
            message: '请选择有无拖欠物业费！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.introduce) {
          Toast({
            message: '请输入个人简介！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (!this.duty) {
          Toast({
            message: '请输入履职承诺！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (this.inchPhoto.length === 0) {
          Toast({
            message: '请上传寸照！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        if (this.papers.length === 0) {
          Toast({
            message: '请上传身份证和房产证！',
            position: 'middle',
            duration: 3000
          })
          return
        }
        Indicator.open({
          text: '提交中...',
          spinnerType: 'fading-circle'
        })
        // console.log(this.name + '-' + this.sexId + '-' + this.zhiye + '-' + this.birthday + '-' + this.culture + '-' + this.face + '-' + this.house + '-' + this.phone + '-' + this.zhiwei + '-' + this.feeId + '-' + this.introduce + '-' + this.duty)
        candRegist(this.id, this.name, this.sexId, this.house, this.areas, this.face, this.zhiye, this.culture, this.introduce, this.duty, this.zhiwei, this.feeId, this.birthday, this.phone, this.reason, this.inchPhoto, this.papers).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Indicator.close()
            Toast({
              message: res.data,
              position: 'middle',
              duration: 3000
            })
            this.$router.replace('/home/SignList')
          }
          if (res.code === 400) {
            Indicator.close()
            Toast({
              message: res.error,
              position: 'middle',
              duration: 3000
            })
            return
          }
        })
      }
    },
    components: {
      headTop,
      IdentPub,
      IdentPub2
    }
  }
</script>

<style lang="scss" scoped>
  .cand_regist {
    padding-top: 40px;
    .cand_title {
      padding: 15px 10px;
      border-bottom: 5px solid #f2f2f2;
      h3 {
        font-size: 15px;
        color: #292929;
        font-weight: normal;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .cand_input {
      padding: 10px;
      li {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        border-bottom: 1px solid #d9d9d9;
        padding: 10px 0;
        align-items: center;
        span {
          font-size: 15px;
          color: #292929;
        }
        input {
          padding: 0 20px 0 10px;
          height: 30px;
          outline: none;
          border: none;
          font-size: 14px;
        }
        .check-ul {
          li {
            border-bottom: none;
          }
          .checkbox-label {
            padding: 0 0.1rem;
            display: flex;
            align-items: center;
            margin-left: 10px;
            .check-input {
              display: none;
              opacity: 0;
            }
            .check-core {
              display: inline-block;
              border-radius: 100%;
              /*background: #e6e7e9;*/
              border: 1px solid #c2c2c2;
              position: relative;
              width: 20px;
              height: 20px;
              vertical-align: middle;
              margin-right: 5px;
            }
            .check-core:after {
              border: 2px solid transparent;
              border-left: 0;
              border-top: 0;
              content: " ";
              top: 1px;
              left: 7px;
              position: absolute;
              width: 6px;
              height: 12px;
              -webkit-transform: rotate(45deg) scale(0);
              transform: rotate(45deg) scale(0);
              -webkit-transition: -webkit-transform .2s;
              transition: -webkit-transform .2s;
              transition: transform .2s;
              transition: transform .2s, -webkit-transform .2s;
            }
            .check-input:checked + .check-core {
              background-color: #26a2ff;
              border-color: #26a2ff;
            }
            .check-input:checked + .check-core:after {
              border-color: #fff;
              -webkit-transform: rotate(45deg) scale(1);
              transform: rotate(45deg) scale(1);
            }
          }
        }
      }
    }
    .fee_div {
      border-bottom: 5px solid #f2f2f2;
      padding-bottom: 10px;
      h4 {
        font-size: 15px;
        font-weight: normal;
        padding: 5px 10px 10px 10px;
      }
      .check-ul {
        margin-top: 10px;
        li {
          border-bottom: none;
          display: -webkit-box;
          display: -moz-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
        }
        .checkbox-label {
          padding: 0 0.1rem;
          display: flex;
          align-items: center;
          margin-left: 10px;
          .check-input {
            display: none;
            opacity: 0;
          }
          .check-core {
            display: inline-block;
            border-radius: 100%;
            /*background: #e6e7e9;*/
            border: 1px solid #c2c2c2;
            position: relative;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-right: 5px;
          }
          .check-span {
            font-size: 15px;
          }
          .check-core:after {
            border: 2px solid transparent;
            border-left: 0;
            border-top: 0;
            content: " ";
            top: 1px;
            left: 7px;
            position: absolute;
            width: 6px;
            height: 12px;
            -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
            -webkit-transition: -webkit-transform .2s;
            transition: -webkit-transform .2s;
            transition: transform .2s;
            transition: transform .2s, -webkit-transform .2s;
          }
          .check-input:checked + .check-core {
            background-color: #26a2ff;
            border-color: #26a2ff;
          }
          .check-input:checked + .check-core:after {
            border-color: #fff;
            -webkit-transform: rotate(45deg) scale(1);
            transform: rotate(45deg) scale(1);
          }
        }
      }
    }
    .textarea_div {
      border-bottom: 10px solid #f2f2f2;
      padding: 10px;
      position: relative;
      p {
        font-size: 15px;
        padding: 5px 0 10px 0;
      }
      textarea {
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        height: 120px;
        background: #f2f2f2;
        border-radius: 7px;
        resize: none;
        outline: none;
        border: none;
        font-size: 13px;
        line-height: 16px;
      }
      .count {
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #0078de;
      }
    }
    .img_post {
      border-bottom: 10px solid #f2f2f2;
      .title {
        padding: 10px;
        font-size: 15px;
        span {
          color: red;
        }
      }
      p {
        padding: 10px;
        font-size: 14px;
        color: #999999;
        span {
          color: red;
        }
      }
    }
    .btn_div {
      padding: 10px;
      button {
        width: 100%;
        padding: 10px 0;
        background: #2585d0;
        font-size: 15px;
        color: #ffffff;
      }
    }
  }
</style>
